
import TypesItem from './TypesItem'
import AddNumber from  './AddNumber'

export default class TypesSection extends React.Component{
    constructor(){
        super()
        this.state={
            choosed:0,
            clicked_index:0
        }
    }
    render(){
        const {choosed,clicked_index}=this.state
        const {product,setCount}=this.props
        const {specification,sku}=product

        return(
            <div className={'detail-top-types-box'}>
                <div className={'detail-top-types-guige'}>
                    <p>规格</p>
                    <TypesItem
                        index={0}
                        specification={specification}
                        choosed={choosed==0}
                        clicked_index={clicked_index==0}
                        onMouseOver={()=>{
                            this.setState({
                                choosed:0
                            })
                        }}
                        onMouseOut={()=>{
                            this.setState({
                                choosed:-1
                            })
                        }}
                        onClick={()=>{
                            this.setState({
                                clicked_index:0
                            })
                        }}
                    />
                </div>
                <div className={'detail-top-types-num'}>
                    <p>数量</p>
                    <AddNumber
                        setCount={setCount}
                    />
                    <p>库存：{sku}</p>
                </div>
            </div>
        )
    }
}